<template>
  <div>
    <div>
      <el-row :gutter="20" type="flex">
        <el-col :xs="12" :sm="8" :md="8" :lg="6"
          ><el-input
            placeholder="请输入用户名"
            v-model="listQuery.userName"
            clearable
          >
          </el-input
        ></el-col>
        <el-col style="float: left; width: 90px"
          ><el-button type="primary" @click="getList()">搜索</el-button></el-col
        >
      </el-row>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="account" label="账号" width="180"> </el-table-column>
      <el-table-column prop="userName" label="用户名" width="180"> </el-table-column>
      <el-table-column prop="userType" label="用户类型">
        <template slot-scope="scope">
          {{ scope.row.userType | roleType }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column prop="updateTime" label="修改时间"> </el-table-column>
    </el-table>

    <Pagination
      v-show="parseInt(tableData.length) > 0"
      :total="parseInt(tableData.length)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
  </div>
</template>

<script>
import { tbDeptQueryUserByDept } from "@/api/admin/user/department-manage.js";
import Bus from "@/utils/bus.js";

export default {
  data() {
    return {
      pageObj: {},
      listQuery: {
        page: 1,
        limit: 10,
        flag: 3,
        deptId: "",
      },
      tableData: [],
    };
  },
  mounted() {
    Bus.$on("selectedData", (v) => {
      this.listQuery.deptId = v.id;
      this.getList();
    });
  },
  methods: {
    getList() {
      tbDeptQueryUserByDept(this.listQuery).then((res) => {
        this.tableData = res.data.data;
        this.pageObj = res.data;
      });
    },
  },
};
</script>
